<template>
  <div class="box8">
    <div class="title">
      <p>数据统计</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 饼图 -->
    <div class="charts" ref="chartsRef"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const chartsRef = ref<HTMLDivElement>();

onMounted(() => {
  const myChart = echarts.init(chartsRef.value);
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "top",
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
    },
    radar: {
      shape: "polygon",
      radius: "65%",
      center: ["50%", "55%"],
      splitNumber: 5,
      axisName: {
        color: "#fff",
        fontSize: 14,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.3)",
        },
      },
      splitArea: {
        areaStyle: {
          color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.04)"],
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.3)",
        },
      },
      indicator: [
        { name: "消费", max: 6500 },
        { name: "好感度", max: 16000 },
        { name: "出行", max: 30000 },
        { name: "小吃", max: 38000 },
        { name: "文旅", max: 52000 },
        { name: "景点", max: 25000 },
      ],
    },
    series: [
      {
        name: "旅游偏好",
        type: "radar",
        symbol: "circle",
        symbolSize: 6,
        lineStyle: {
          width: 2,
        },
        areaStyle: {
          opacity: 0.3,
        },
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: "购物",
            itemStyle: { color: "#00c0ff" },
            lineStyle: { color: "#00c0ff" },
            areaStyle: { color: "#00c0ff" },
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: "餐饮",
            itemStyle: { color: "#ff6bcb" },
            lineStyle: { color: "#ff6bcb" },
            areaStyle: { color: "#ff6bcb" },
          },
        ],
      },
    ],
  };
  myChart.setOption(option);
});
</script>

<style scoped lang="scss">
.box8 {
  margin-top: 10px;
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat center;
  background-size: cover;
  border-radius: 12px;
  padding: 10px 20px;
  box-shadow: 0 4px 16px rgba(0, 255, 255, 0.1);

  .title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;

    p {
      font-size: 22px;
      font-weight: bold;
      color: #ffffff;
      letter-spacing: 1px;
    }

    img {
      width: 80px;
      height: auto;
    }
  }

  .charts {
    height: 280px;
    margin-top: 10px;
  }
}
</style>
